<template>
  <el-dialog title="设备详情"
             :visible.sync="dialogVisible"
             width="40%"
             :before-close="handleClose">
    <div class="dialog_box">
      <div>
        <p>销售量：</p>
        <span>{{total}}个</span>
      </div>

      <div>
        <p>销售额：</p>
        <span>{{totalMoney }}元</span>
      </div>

      <div>
        <p>补货次数：</p>
        <span>0个</span>
      </div>

      <div>
        <p>维修次数：</p>
        <span>0个</span>
      </div>
    </div>
    <h4>商品销量（月）</h4>
    <p v-if="!setskuCollectTable.length">当前设备未销售商品</p>
    <div class="table"
         v-else>
      <div class="tabLine"
           v-for="(item,index) in setskuCollectTable"
           :key="index">
        <p>{{item.skuName}} </p>
        <p>： {{item.count}}</p>
      </div>
    </div>

  </el-dialog>
</template>

<script>
import { mapState } from 'vuex';
export default {
  data () {
    return {
    };
  },
  created () {
  },
  methods: {
   handleClose(){
     this.$store.commit('fixingState/updatadialogVisible')
   }
  },
  computed: {
    ...mapState('fixingState', ['FixingStateTotal', 'TableList', 'dialogVisible', 'setskuCollectTable', 'innerCode','total','totalMoney'])
  },
}
</script>

<style lang="less" scoped>
.table {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #d8dde3;
  border-left: 1px solid #d8dde3;
}
.tabLine {
  display: flex;
  justify-content: space-around;
  padding: 0 13px;
  width: 21%;
  line-height: 40px;
  border-right: 1px solid #d8dde3;
  border-bottom: 1px solid #d8dde3;
  p {
    width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.dialog_box {
  display: flex;
  height: 54px;
  background: rgba(227, 233, 245, 0.39);
  border-radius: 10px;
  text-align: center;
  justify-content: space-around;
  align-content: center;
  font-size: 13px;
  line-height: 31px;
  p {
    display: inline-block;
  }
  span {
    color: #5f84ff;
  }
}
h4 {
  font-weight: normal;
}
p {
  text-align: center;
}
</style>